<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入 Vue 3 全局构建版本 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 
  <style>
    /* 简单设置图片样式，可根据需求调整 */
    img {
      width: 100px;
      height: 100px;
      margin: 5px;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 选项区域 -->
    <label>
      <input type="checkbox" value="A" @change="handleCheck"> A
    </label>
    <label>
      <input type="checkbox" value="B" @change="handleCheck"> B
    </label>
    <label>
      <input type="checkbox" value="C" @change="handleCheck"> C
    </label>
    <br>
    <!-- 图片展示区域，根据选中项动态渲染 -->
    <img v-for="(imgSrc, index) in showImgs" :src="imgSrc" :key="index" v-show="showImgs.length > 0">
    <br>
    <!-- 原数组数据判断示例（可保留或删除，看需求） -->
    
  </div>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          names: ["张三", "李四", "王五", "赵六", "高七"],
          // 存选中的选项值
          checkedValues: [], 
          // 配置选项对应的图片路径，可根据实际修改
          imgMap: { 
            A: '../a.jpg',
            B: '../b.jpg',
            C: '../c.jpg'
          }
        }
      },
      methods: {
        handleCheck(e) {
          const value = e.target.value;
          if (e.target.checked) {
            this.checkedValues.push(value);
          } else {
            const index = this.checkedValues.indexOf(value);
            if (index !== -1) {
              this.checkedValues.splice(index, 1);
            }
          }
        }
      },
      computed: {
        hasData() {
          return this.names.length > 0 ? "是" : "否";
        },
        showImgs() {
          // 根据选中项，筛选出要显示的图片路径数组
          return this.checkedValues.map(item => this.imgMap[item]); 
        }
      }
    }).mount('#app');
  </script>
</body>

</html>